<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- コンテナをロード -->
  <script type="text/javascript" src="../src/container.js" ></script>
</head>
<body>
  <div id="stdout"></div>
  <script type="text/javascript">
var stdout = document.getElementById( "stdout" );

// クラス
function Kitten( name, age ) {
    this.name = name;
    this.age = age;
}
Kitten.prototype = {
   getName: function () { return this.name; },
   getAge:  function () { return this.age; }
};

var c = new container.Container( function( binder ) {

  // コンポーネント個別のインターセプタと重ねがけも可能。
  binder.bind( Kitten ).to( "tora" ).inject( { "name": "tora", "age":2 });
  binder.bind( Kitten ).to( "mii" ).inject( { "name": "mii",  "age":1 })
  .intercept( function ( mi ) { // インターセプタを設定
    return mi.proceed() + "_i"; // 結果の末尾に"_i"を付けて返す。
  }, container.any());

  // グローバルインターセプターの設定
  binder.bindInterceptor( function ( mi ) {
      return mi.proceed() + "_g"; // 結果の末尾に"_g"を付けて返す。
  }, new container.Matcher(/mii/), new container.Matcher(/getAge/));

});

var mii = c.get( "mii" );
stdout.innerHTML += mii.getName() + ":" + mii.getAge() + "<br/>"; // mii_i : 1_i_global
var tora = c.get( "tora" );
stdout.innerHTML += tora.getName() + ":" + tora.getAge() + "<br/>";  // tora : 2

  </script>
</body>
</html>